<template>
  <div>
    <div class="shopcart">
      <div class="content" @click="toggleList">
        <div class="content-left">
          <div class="logo-wrapper">
            <div class="logo" :class="{ highlight: totalCount > 0 }">
              <i
                class="icon-shopping_cart"
                :class="{ highlight: totalCount > 0 }"
              ></i>
            </div>
            <div class="num" v-show="totalCount > 0">
              <bubble :num="totalCount"></bubble>
            </div>
          </div>
          <div class="price" :class="{ highlight: totalPrice > 0 }">
            ￥{{ totalPrice }}
          </div>
          <div class="desc">另需配送费￥{{ deliveryPrice }}元</div>
        </div>
        <div class="content-right" @click="pay">
          <div class="pay" :class="payClass">
            {{ payDesc }}
          </div>
        </div>
      </div>
      <balls-animation ref="ballsAnimation"></balls-animation>
    </div>
  </div>
</template>

<script>
import bubble from './bubble'
import ballsAnimation from './ballsAnimation'

export default {
  name: 'shopCart',
  props: {
    selectFoods: {
      type: Array,
      default() {
        return []
      },
    },
    deliveryPrice: {
      type: Number,
      default: 0,
    },
    minPrice: {
      type: Number,
      default: 0,
    },
    fold: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      listFold: this.fold,
    }
  },
  computed: {
    totalPrice() {
      return this.selectFoods.reduce((total, food) => total + food.count * food.price, 0)
    },
    totalCount() {
      return this.selectFoods.reduce((count, food) => count + food.count, 0)
    },
    payDesc() {
      if (this.totalPrice === 0) {
        return `￥${this.minPrice}元起送`
      }
      if (this.totalPrice < this.minPrice) {
        let diff = this.minPrice - this.totalPrice
        return `还差￥${diff}元起送`
      }
      return '去结算'

    },
    payClass() {
      if (!this.totalCount || this.totalPrice < this.minPrice) {
        return 'not-enough'
      } else {
        return 'enough'
      }
    },
  },
  methods: {
    toggleList() {
      if (this.listFold) {
        if (!this.totalCount) {
          return
        }
        this.listFold = false
        this._showShopCartList()
        this._showShopCartSticky()
      } else {
        this.listFold = true
        this._hideShopCartList()
      }
    },
    _showShopCartList() {
      this.shopCartListComp =
        this.shopCartListComp ||
        this.$createShopCartList({
          $props: {
            selectFoods: 'selectFoods',
          },
          $events: {
            hide: () => {
              // 子组件隐藏后，触发 hide 事件更改父组件的 listFold
              this.listFold = true
            },
            leave: () => {
              // shopCart-Lsit 隐藏后会调用 shopCart-Sticky隐藏
              this._hideShopCartSticky()
            },
            add: target => {
              // 调用 Sticky 中的动画效果
              this.shopCartStickyComp.dropBall(target)
            },
          },
        })
      this.shopCartListComp.show()
    },
    _hideShopCartList() {
      // 如果当前组件没有 listComp实例，就去父组件获取
      // 父组件的 listComp 实例，会在创建 shopCart-Sticky 的时候传进去
      const listComp = this.shopCartListComp || this.$parent.listComp
      listComp.hide()
    },
    _showShopCartSticky() {
      this.shopCartStickyComp =
        this.shopCartStickyComp ||
        this.$createShopCartSticky({
          $props: {
            selectFoods: 'selectFoods',
            deliveryPrice: 'deliveryPrice',
            minPrice: 'minPrice',
            fold: 'listFold',
            listComp: this.shopCartListComp,
          },
        })
      this.shopCartStickyComp.show()
    },
    _hideShopCartSticky() {
      // shopCart-Lsit 隐藏后会调用 此方法
      this.shopCartStickyComp.hide()
    },
    pay(e) {
      if (this.totalPrice < this.minPrice) {
        return
      }
      this.$createDialog({
        content: `你需要支付${this.totalPrice}元`,
      }).show()
      e.stopPropagation()
    },
    dropBall(target) {
      this.$refs.ballsAnimation.dropBall(target)
    },
  },
  watch: {
    // 在 Sticky 中起到跟父组件的 listFold 同步的效果 ，防止父子组件转态不统一，导致多次创建 shopCart-List 和 shopCart-Sticky
    fold(newVal) {
      this.listFold = newVal
    },
  },
  components: {
    bubble,
    ballsAnimation,
  },
}
</script>

<style lang="stylus" scoped>
@import '~styles/variable.stylus';

.shopcart {
  .content {
    display: flex;
    height: 48px;

    .content-left {
      flex: 1;
      background: #141d27;
      white-space: nowrap;
      font-size: 0;

      .logo-wrapper {
        display: inline-block;
        vertical-align: top;
        position: relative;
        top: -10px;
        margin: 0 12px;

        @media screen and (max-width: 320px) {
          margin: 0 0 0 6px;
        }

        .logo {
          width: 46px;
          height: 46px;
          background: #2b343c;
          border: 6px solid #131d26;
          border-radius: 50%;
          text-align: center;

          &.highlight {
            background: #00a0dc;
          }

          .icon-shopping_cart {
            height: 46px;
            line-height: 46px;
            font-size: 24px;
            color: rgba(255, 255, 255, 0.4);

            &.highlight {
              color: #fff;
            }
          }
        }

        .num {
          position: absolute;
          top: 0;
          right: 0;
        }
      }

      .price {
        display: inline-block;
        vertical-align: top;
        margin-top: 12px;
        padding-right: 12px;
        font-size: 16px;
        line-height: 24px;
        font-weight: 700;
        color: rgba(255, 255, 255, 0.4);
        border-right: 1px solid #2c343d;

        @media screen and (max-width: 320px) {
          padding-right: 6px;
        }

        &.highlight {
          color: #fff;
        }
      }

      .desc {
        display: inline-block;
        vertical-align: top;
        margin: 12px 0 0 12px;
        font-size: 10px;
        line-height: 24px;
        color: rgba(255, 255, 255, 0.4);

        @media screen and (max-width: 320px) {
          margin: 12px 0 0 6px;
        }
      }
    }

    .content-right {
      flex: 0 0 105px;
      width: 105px;
      height: 48px;
      text-align: center;
      font-size: 12px;
      font-weight: 700;
      line-height: 48px;

      @media screen and (max-width: 320px) {
        flex: 0 0 100px;
        width: 100px;
      }

      .not-enough {
        color: rgba(255, 255, 255, 0.4);
        background: #2b333b;
      }

      .enough {
        color: #fff;
        background: #00b43c;
      }
    }
  }
}
</style>
